<template>
  <div class="update-info">
    <div class="title">设备信息</div>
    <el-form :inline="true" :rules="showWhich == 'detail' ? {} : equipRules" ref="equipRef" :model="updateInfo"
      :disabled="disabled" label-width="80px" class="sky-form">
      <el-form-item v-for="v in equipItem" :key="v.prop" :label="v.name" :prop="v.prop" :class="v.type"
        :style="{ 'display': (v.prop == 'channels' ? 'block' : 'inline-block') }">
        <el-input v-if="v.type == 'input'" v-model.trim="updateInfo[v.prop]" clearable
          @blur="onFormItemBlur(v.prop)"></el-input>
        <template v-else-if="v.type == 'select'">
          <el-select placeholder=" " v-if="v.prop == 'objType'" v-model="updateInfo[v.prop]" filterable
            @change="changeSupervisionType" :clearable="false">
            <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select placeholder=" " v-else v-model="updateInfo[v.prop]" filterable clearable>
            <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
        <el-tree-select v-else-if="v.type == 'treeSelect'" v-model="updateInfo[v.prop]" clearable
          :data="sel_option[v.prop]" :expand-on-click-node="false" :render-after-expand="false" check-strictly
          :props="{ label: 'label' }" node-key="id" filterable placeholder=" " @change="changeValue" />
        <div v-else-if="v.type == 'moreSelect'">
          <el-select placeholder=" " v-model="updateInfo[v.prop]" clearable style="width:54px">
            <el-option v-for="item in sel_option.channels" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select> 个
          <el-select placeholder=" " v-show="updateInfo[v.prop] && i < updateInfo[v.prop]"
            v-for="(num, i) in sel_option.channels" :key="num.value" v-model="num.chVal" clearable
            style="width:66px;margin:0 2px;">
            <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="'CH' + item.label"
              :value="item.value"> </el-option>
          </el-select>
        </div>
      </el-form-item>
    </el-form>
    <!-- 第二块：设备信息等 -->
    <div v-if="updateInfo.objType !== '' && updateInfo.objType !== null && updateInfo.objType !== undefined"
      style="margin-bottom:50px">
      <div class="split-line"></div>
      <div class="title">{{ sel_option.objType[Number(updateInfo.objType)].label }}信息</div>
      <el-form :inline="true" :rules="showWhich == 'detail' ? {} : supervisionRules" ref="supervisionRef"
        :model="supervisionInfo" :disabled="disabled" label-width="80px" class="sky-form">
        <el-form-item v-for="v in supervisionItem[supervisionArr[Number(updateInfo.objType)]]" :key="v.prop"
          :label="v.name" :prop="v.prop" :class="v.type"
          :style="{ 'margin-bottom': (v.prop == 'objIcon' ? '0' : '18px'), 'height': (v.prop == 'objIcon' && supervisionArr[Number(updateInfo.objType)] == 'goods') ? '100px' : '32px' }">
          <div v-if="v.prop == 'objIcon'" class="icon-div">
            <img v-for="(item, i) in supervisionImg[supervisionArr[Number(updateInfo.objType)]]" :key="i"
              :src="myRequire('equipment/' + item + (activeImg == item ? '_active' : '') + '.png')"
              @click="changeImg(item)">
          </div>
          <!-- <div v-if="v.prop == 'objIcon' && showWhich == 'detail'" class="icon-div">
            <img :src="myRequire('equipment/' + supervisionInfo[v.prop] + '.png')">
          </div> -->
          <el-input v-else-if="v.type == 'input'" v-model.trim="supervisionInfo[v.prop]" filterable clearable></el-input>
          <el-select v-else-if="v.type == 'select'" v-model="supervisionInfo[v.prop]" filterable clearable
            :placeholder="disabled ? ' ' : '请选择'">
            <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- 光伏板编号 -->
          <el-select v-else-if="v.type == 'querySelect'" v-model="supervisionInfo[v.prop]" :disabled="isNullCompanyId"
            :clearable="true" filterable remote reserve-keyword :remote-method="queryNumberPlateAsync" value-key="id"
            @change="changeNumberPlate" @clear="clearNumberPlate" @focus="focusNumberPlate"
            :placeholder="disabled ? '' : '请选择'" @blur="onFormItemBlur(v.prop)">
            <el-option v-for="item in sel_option[v.prop]" :key="item.vehicleId" :value="item" :label="item.numberPlate">
              <div style="display:flex;justify-content:space-between;">
                <span style="font-weight: 600;margin-right:30px">{{ item.numberPlate }}</span>
                <span>{{ item.vehicleId }}</span>
              </div>
            </el-option>
          </el-select>
          <div v-else-if="v.type == 'photo'">
            <ImageUpload ref="myUploadPic" url='/comlbs/vehicleManagement/uploadFile' key="myUploadPic"
              :pictures='supervisionInfo.vehiclePic || []' :disabled="disabled">
            </ImageUpload>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="updateInfo.objType || updateInfo.objType == '0'" style="margin-bottom:50px;margin-top:10px">
      <div class="title">负责人信息</div>
      <el-form :inline="true" ref="driverRef" :model="driverInfo" :disabled="disabled" label-width="80px"
        class="sky-form" :rules="showWhich == 'detail' ? {} : driverRules">
        <el-form-item v-for="v in driverItem" :key="v.prop" :label="v.name" :prop="v.prop" :class="v.type"
          :style="{ 'margin-bottom': (v.prop == 'objIcon' ? '0' : '18px'), 'height': (v.prop == 'objIcon' && supervisionArr[Number(updateInfo.objType)] == 'goods') ? '100px' : '32px' }">
          <el-input v-if="v.type == 'input'" v-model.trim="driverInfo[v.prop]"
            :disabled="v.prop == 'driverId'"></el-input>
          <el-select v-else-if="v.type == 'select'" v-model="driverInfo[v.prop]" filterable clearable
            :placeholder="disabled ? ' ' : '请选择'">
            <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-else-if="v.type == 'querySelect'" v-model="driverInfo[v.prop]" value-key="id" :clearable="true"
            filterable remote reserve-keyword :remote-method="queryDriverAsync" @change="changeDriver"
            @clear="clearDriver" @focus="focusDriver" :placeholder="disabled ? '' : '请选择'">
            <el-option v-for="item in sel_option[v.prop]" :key="item.value" :value="item" :label="item.name">
              <div style="display:flex;justify-content:space-between;">
                <span style="font-weight: 600;margin-right:30px">{{ item.name }}</span>
                <span>{{ item.id }}</span>
              </div>
            </el-option>
          </el-select>
          <div v-else-if="v.type == 'photo'">
            <ImageUpload :limit="1" :rank="1" ref="driverUploadPic" url='/comlbs/driverInfo/uploadFile'
              key="driverUploadPic" :pictures='driverInfo.driverPic || []' :disabled="disabled">
            </ImageUpload>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 编辑时显示sim卡信息(仅展示，不参与编辑，设置为只读) -->
    <div v-if="showWhich == 'edit' || showWhich == 'detail'" style="margin-top:10px">
      <div class="title">
        SIM卡信息
        <span style="color: #AAA;font-weight: 400;font-size: 14px;margin: 0 10px;">数据更新时间：{{ simInfo.simUpdateTime
        }}</span>
        <span style="color: #3C7BF8;font-weight: 400;font-size: 14px;cursor: pointer;" @click="getSimData(true)">刷新</span>
      </div>
      <el-form :inline="true" :model="simInfo" :disabled="true" label-width="80px" class="sky-form">
        <el-form-item v-for="v in simItem" :key="v.prop" :label="v.name" :prop="v.prop">
          <el-input v-if="v.type == 'input'" v-model="simInfo[v.prop]"></el-input>
          <el-select v-else-if="v.type == 'select'" v-model="simInfo[v.prop]" filterable clearable placeholder=" ">
            <el-option v-for="item in sel_option[v.prop]" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker v-model="simInfo[v.prop]" type="date" placeholder=" " value-format="yyyy-MM-dd"
            v-else-if="v.type == 'day'" style="width:265px">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import request from '@/utils/request'
const { proxy } = getCurrentInstance();
// 防抖对象
const timer = ref(null);
// 防抖时间内认为是一次操作
const wait = 300;
let validateBool = [false, false, false];
const blurFlags = ref({}) // 用于记录各表单项是否已执行过验证
const equipItem = ref([
  { name: '设备号', prop: 'deviceId', type: 'input' },
  { name: '所属公司', prop: 'companyId', type: 'treeSelect' },
  { name: '设备型号', prop: 'deviceModel', type: 'select' },
  { name: 'SIM卡号', prop: 'simId', type: 'input' },
  { name: '监管类型', prop: 'objType', type: 'select' },
  { name: '备注', prop: 'remark', type: 'input' },
  { name: '视频接入', prop: 'channels', type: 'moreSelect' },
]);
// sim卡信息(仅展示，不参与编辑，设置为只读)
const simItem = ref([
  { name: '开卡时间', prop: 'activeDate', type: 'day' },
  { name: '运营商', prop: 'carrier', type: 'input' },
  { name: '总流量', prop: 'dataTrafficAmount', type: 'input' },
  { name: '到期时间', prop: 'expiryDate', type: 'day' },
  { name: '超出流量', prop: 'outDataUsage', type: 'input' },
  { name: '剩余流量', prop: 'dataBalance', type: 'input' },
  { name: '卡状态', prop: 'accountStatus', type: 'select' },
])
function myRequire(str) {
  return new URL(`../../../assets/img/${str}`, import.meta.url).href
}

function onFormItemBlur(prop) {
  // 标记该表单项已经执行过验证
  blurFlags.value[prop] = true;
}
// 负责人信息
const driverItem = ref([
  { name: '负责人', prop: 'name', type: 'querySelect' },
  // { name: '负责人ID', prop: 'driverId', type: 'input' },
  { name: '身份证号', prop: 'idCard', type: 'input' },
  { name: '联系方式', prop: 'contactNumber', type: 'input' },
  { name: '年龄', prop: 'age', type: 'input' },
  { name: '图片附件', prop: 'driverPic', type: 'photo' },
])
const { showWhich, sel_option, form, disabled } = defineProps({
  showWhich: { type: String },
  sel_option: { type: Object },
  form: { type: Object },
  disabled: { type: Boolean },
});
const updateInfo = ref({});
const supervisionInfo = ref({});
const driverInfo = ref({});
const simInfo = ref({});
const isNullCompanyId = ref(false);
const activeImg = ref(null);
const supervisionArr = ref(GlobalSetting.equipArr)
const supervisionImg = ref(GlobalSetting.equipImg)
const supervisionRef = ref(null);
const equipRef = ref(null);
const driverRef = ref(null);
const myUploadPic = ref(null);
const driverUploadPic = ref(null);
const supervisionItem = ref({
  car: [
    { name: '设备图标', prop: 'objIcon', type: 'img' },
    { name: '光伏板编号', prop: 'numberPlate', type: 'querySelect' },
    { name: '设备型号', prop: 'vehicleModel', type: 'input' },
    { name: '颜色', prop: 'vehicleColor', type: 'input' },
    { name: '图片附件', prop: 'vehiclePic', type: 'photo' },
  ],
  ship: [
    { name: '船舶图标', prop: 'objIcon', type: 'img' },
    { name: '船牌号', prop: 'numberPlate', type: 'querySelect' },
    { name: '船舶型号', prop: 'vehicleModel', type: 'input' },
    { name: '颜色', prop: 'vehicleColor', type: 'input' },
    { name: '图片附件', prop: 'vehiclePic', type: 'photo' },
  ],
  person: [
    { name: '人员图标', prop: 'objIcon', type: 'img' },
    { name: '人员姓名', prop: 'numberPlate', type: 'querySelect' },
    { name: '性别', prop: 'objSex', type: 'select' },
    { name: '联系方式', prop: 'objContactNumber', type: 'input' },
    { name: '年龄', prop: 'objAge', type: 'input' },
    { name: '图片附件', prop: 'vehiclePic', type: 'photo' },
  ],
  goods: [
    { name: '物品图标', prop: 'objIcon', type: 'img' },
    { name: '物品名称', prop: 'numberPlate', type: 'querySelect' },
    { name: '图片附件', prop: 'vehiclePic', type: 'photo' },
  ],
  animal: [
    { name: '动物图标', prop: 'objIcon', type: 'img' },
    { name: '动物名称', prop: 'numberPlate', type: 'querySelect' },
    { name: '图片附件', prop: 'vehiclePic', type: 'photo' },
  ],
  other: [
    { name: '其他图标', prop: 'objIcon', type: 'img' },
    { name: '名称', prop: 'numberPlate', type: 'querySelect' },
    { name: '图片附件', prop: 'vehiclePic', type: 'photo' },
  ],
});

function initData() {
  updateInfo.value = JSON.parse(JSON.stringify(form));
  supervisionInfo.value = JSON.parse(JSON.stringify(form));

  driverInfo.value = {
    name: form.driverName,
    driverId: form.driverId,
    idCard: form.driverIdCard,
    contactNumber: form.driverContactNumber,
    age: form.driverAge,
    driverPic: form.driverPic,
  };
  blurFlags.value = {};
  validateBool = [false, false, false];
  //特殊处理-start
  supervisionInfo.value.objSex = form.objSex == null ? form.objSex : form.objSex + ''

  updateInfo.value.name = form.driverName
  updateInfo.value.idCard = form.driverIdCard
  updateInfo.value.contactNumber = form.driverContactNumber
  updateInfo.value.age = form.driverAge
  updateInfo.value.objType = updateInfo.value.objType ?? "0"

  sel_option.channels.forEach((v) => {
    v.chVal = null;
  })
  if (form.channels) {
    let list = form.channels.split(',')
    updateInfo.value.channels = list.length;
    sel_option.channels.forEach((v, i) => {
      if (list[i] > 0) v.chVal = list[i];
    })
  }
  if (form.simId) getSimData();
  //特殊处理-end

  // resetSupervisionImg();
  // 监管类型不为空时
  if (form.objType || form.objType === 0) {
    // 设备图标回显处理
    activeImg.value = form.objIcon
  }
}
initData();
// 新增编辑框-设备图标选中切换逻辑
function changeImg(item) {
  if (disabled || showWhich == 'detail') return
  activeImg.value = item
}
let deviceValidate = async (rule, value, callback) => {
  validateBool[0] = false;
  if (value === '') {
    callback(new Error('请输入设备号'));
  } else if (!/^[0-9a-zA-Z]+$/.test(value)) {
    callback(new Error('设备号只能包括英文和数字'));
  } else {
    let url = '/comlbs/equipmentManagement/checkExistDeviceId';
    const data = await request({
      url: url,
      method: 'post',
      data: {
        deviceId: value,
        equipmentId: updateInfo.value.equipmentId ?? '',
      },
    })
    if (data.code == 200) {
      validateBool[0] = true;
      callback()
    } else {
      callback(new Error('该设备号已存在'))
    }
  }
}
let simIdValidate = async (rule, value, callback) => {
  validateBool[1] = false;
  if (value == '' || !value) {
    validateBool[1] = true;
    callback()
    return
  }
  if (value.length != 9 && value.length != 11 && value.length != 13 && value.length != 14 && value.length != 20) {
    callback(new Error("长度为9或11或13或14位或20位"));
  }
  let reg = /^[0-9A-Z]+$/; //数字或大写字母
  if (!reg.test(value)) {
    callback(new Error("卡号只能是纯数字"));
  }

  let url = '/comlbs/equipmentManagement/checkExistSimId';
  const data = await request({
    url: url,
    method: 'post',
    data: {
      iccid: value,
      equipmentId: updateInfo.value.equipmentId ?? '',
    }
  })
  if (data.code == 200) {
    validateBool[1] = true;
    callback()
  } else {
    callback(new Error(data.msg))
  }
}
// 光伏板编号重复验证
let numberPlateValidate = async (rule, value, callback) => {
  validateBool[2] = false;
  if (value === '' || !value) {
    callback(new Error('不能为空'));
  } else {
    let url = "/comlbs/vehicleManagement/checkExistNumberPlate", _data;
    if (value.vehicleId == '新增') {
      _data = {
        numberPlate: value.numberPlate,
        companyId: updateInfo.value.companyId,
        objType: updateInfo.value.objType
      }
    } else {
      _data = {
        objId: value.id || updateInfo.value.vehicleId,
        numberPlate: value.numberPlate || updateInfo.value.numberPlate,
        companyId: updateInfo.value.companyId,
        objType: updateInfo.value.objType
      }
    }
    const data = await request({
      url: url,
      method: 'post',
      data: _data,
    })
    if (data.code == 200) {
      validateBool[2] = true;
      callback()
    } else {
      callback(new Error('该名称已存在'))
    }
  }
}
// 设备图标，此处验证设置为通过，在提交表单时验证是否为空
let objIconValidate = async (rule, value, callback) => {
  if (value == '' || !value) {
    callback()
    return
  }
}
// 负责人下拉框  
function queryDriverAsync(queryStr) {
  function handle() {
    if (queryStr == '') {
      sel_option.name = [];
      return
    }
    let data = {
      name: queryStr,
      companyId: updateInfo.value.companyId
    }
    request({
      url: "/comlbs/driverInfo/search",
      method: "post",
      data: data
    }).then(res => {
      sel_option.name = res.data;
      let bool = res.data.some(v => {
        return v.name == queryStr
      })
      if (!bool) {
        sel_option.name.unshift({ name: queryStr, id: "新增", vehiclePic: [] })
      }
    })
  }
  debounce(handle);
}

function changeDriver(val) {
  if (val == '') return
  if (val.id == "新增") {
    driverInfo.value.driverId = ''
    driverInfo.value.idCard = ''
    driverInfo.value.contactNumber = ''
    driverInfo.value.age = ''
  }
  else { // 若选择的是已存在的光伏板编号
    driverInfo.value.driverId = val.id
    driverInfo.value.idCard = val.idCard
    driverInfo.value.contactNumber = val.contactNumber
    driverInfo.value.age = val.age
  }
  driverInfo.value.driverPic = val.picture
  driverRef.value.validateField("name");
}
// 负责人清空
function clearDriver() {
  sel_option.name = []
  driverInfo.value.driverId = ''
  driverInfo.value.idCard = ''
  driverInfo.value.contactNumber = ''
  driverInfo.value.age = ''
  driverInfo.value.driverPic = []
  document.getElementsByClassName('el-upload--picture-card')[1].style.display = 'inline-block'
}
// 获得焦点时触发,清空光伏板编号下拉框
function focusDriver() {
  sel_option.name = []
}
const equipRules = ref({
  deviceId: [
    { required: true, validator: deviceValidate, trigger: 'blur' },
  ],
  simId: [
    { required: false, validator: simIdValidate, trigger: 'blur' },
  ],
  companyId: [
    { required: true, type: "string", message: '请选择所属公司', trigger: 'change' }
  ],
  objType: [
    { required: true, type: "string", message: '请选择所属公司', trigger: 'change' }
  ],
})
const supervisionRules = ref({
  numberPlate: [
    { required: true, validator: numberPlateValidate, trigger: 'blur' },
  ],
  objIcon: [
    { required: true, validator: objIconValidate, trigger: 'blur' },
  ],
})
const driverRules = ref({
  // name: [{ required: true, type: "string", message: '请输入负责人名称', trigger: 'blur' }]
})
function changeNumberPlate(val) {
  if (val == '') return
  if (val.vehicleId == "新增") {
    supervisionInfo.value.vehicleColor = '';
    supervisionInfo.value.vehicleModel = '';
    supervisionInfo.value.vehicleId = '';
  } else { // 若选择的是已存在的光伏板编号
    supervisionInfo.value.vehicleColor = val.vehicleColor;
    supervisionInfo.value.vehicleModel = val.vehicleModel;
    supervisionInfo.value.objSex = val.ownerSex + '';
    supervisionInfo.value.objContactNumber = val.contactNumber;
    supervisionInfo.value.objAge = val.age;
    supervisionInfo.value.vehicleId = val.id;
    activeImg.value = val.objIcon
  }
  supervisionInfo.value.vehiclePic = val.vehiclePic;
  supervisionRef.value.validateField("numberPlate");
}

function debounce(func) {
  let _time = timer.value
  if (_time) {
    clearTimeout(_time)
  }
  timer.value = setTimeout(function () {
    func.call()
  }, wait)
}
// 设备图标恢复初始状态
function getSimData(showTip = false) {
  request({
    url: '/comlbs/equipmentManagement/checkExistSimId',
    method: 'post',
    data: {
      iccid: updateInfo.value.simId,
      equipmentId: updateInfo.value.equipmentId ?? '',
    }
  }).then(response => {
    if (response.code == 200) {
      simInfo.value = response.data
      simInfo.value.simUpdateTime = response.data.updateTime
      if (showTip) {
        proxy.$modal.msgSuccess("刷新成功");
      }
    }
  })
};
// 光伏板编号下拉框
function queryNumberPlateAsync(queryStr) {
  function handle() {
    if (queryStr == '') {
      sel_option.numberPlate = [];
      return
    }
    let data = {
      numberPlate: queryStr,
      objType: updateInfo.value.objType,
      companyId: updateInfo.value.companyId,
      equipmentId: updateInfo.value?.equipmentId
    }
    request({
      url: "/comlbs/vehicleManagement/search",
      method: "post",
      data: data
    }).then(res => {
      sel_option.numberPlate = [...res.data];
      let bool = res.data.some(v => {
        return v.numberPlate == queryStr
      })
      if (!bool) {
        sel_option.numberPlate.unshift({ numberPlate: queryStr, vehicleId: "新增", vehicleColor: '', vehicleModel: '', objIcon: '', vehiclePic: [] })
      }
    })
  }
  debounce(handle);
}
// 获得焦点时触发,清空光伏板编号下拉框
function focusNumberPlate() {
  if (!updateInfo.value.companyId) {
    proxy.$modal.notify("请先选择公司!");
    isNullCompanyId.value = true
  }
  sel_option.numberPlate = []
}
// 光伏板编号清空
function clearNumberPlate() {
  sel_option.numberPlate = []
  supervisionInfo.value = {}
  activeImg.value = null  // 设备图标恢复初始
}
// 监管对象改变时，将监管对象信息清空
function changeSupervisionType() {
  supervisionInfo.value = {}
  activeImg.value = null
}
function changeValue() {
  if (updateInfo.value.companyId) isNullCompanyId.value = false
  // 所属公司改变，将监管对象信息、负责人信息清空
  supervisionInfo.value = {}
  driverInfo.value = {}
  activeImg.value = null
  equipRef.value.validateField("companyId");

}
// 提交之前的验证方法
function validate() {
  const equipKeys = Object.keys(equipRules.value);
  const supervisionKeys = Object.keys(supervisionRules.value);
  const equipFieldsToValidate = equipKeys.filter(key => !blurFlags.value[key]);
  const supervisionFieldsToValidate = supervisionKeys.filter(key => !blurFlags.value[key]);
  return new Promise((resolve, reject) => {
    // 不选监管类型时
    if (!updateInfo.value.objType && updateInfo.value.objType !== 0) {
      equipRef.value.validateField(equipFieldsToValidate, (valid) => {
        validateBool.forEach(v => {
          valid = valid && v
        })
        resolve(valid)
      })
    } else {
      Promise.all([
        equipRef.value.validateField(equipFieldsToValidate),
        supervisionRef.value.validateField(supervisionFieldsToValidate)]).then((valid) => {
          let flag = true;
          valid.forEach(v => {
            flag = flag && v
          })
          validateBool.forEach(v => {
            flag = flag && v
          })
          resolve(flag)
        })
    }
  })
}
defineExpose({
  validate,
  updateInfo,
  supervisionInfo,
  driverInfo,
  activeImg,
  myUploadPic,
  driverUploadPic
});
</script>
<style lang='scss' scoped>
.update-info {
  width: 100%;
  height: 600px;
  overflow-y: auto;
}

.title {
  margin-left: 15px;
  margin-bottom: 15px;
  color: #241f34;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}

.split-line {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 15px;
  margin-top: 15px;
}

.icon-div {
  margin-top: -9px;

  img {
    cursor: pointer;
    margin-right: 5px;
  }
}

.moreSelect {
  width: calc(100% - 32px) !important;

  :deep(.el-input__wrapper) {
    padding: 1px 8px 1px 12px;
  }

  :deep(.el-input__suffix-inner>:first-child) {
    margin-left: 4px;
  }
}

:deep(.el-upload--picture-card) {
  width: 60px;
  height: 60px;
  line-height: 67px;
}

:deep(.el-upload-list--picture-card) .el-upload-list__item {
  width: 60px;
  height: 60px;
}
</style>